<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-16 11:56:43
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-11-16 16:19:00
-->
<template>
  <div style="text-align: left;">
    <div style="margin: 5px;">
      <el-button type="primary" @click="addUserFirst">增加用户</el-button>
    </div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码">
    </el-table-column>
     <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button type="primary" @click="updateUser(scope.row)" size="small">修改</el-button>
        <el-button type="danger" @click="deleteUser(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-dialog
      :title="isAdd ? '增加用户': '修改用户'"
      :visible.sync="addUserShow"
      width="30%">
      <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isAdd" type="primary" @click="submit('ruleForm')">确定</el-button>
        <el-button v-else type="primary" @click="submit('ruleForm')">修改</el-button>
        <el-button @click="addUserShow = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isAdd: true,
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
        },
        addUserShow: false,
        tableData: []
      }
    },
    mounted(){
      // 在页面加载完成后，获取一次数据
      this.getData()
    },
    methods:{
      addUserFirst(){
        this.addUserShow = true
        this.isAdd = true;
      },
      updateUser(row){
        console.log('更新用户',row)
        this.isAdd = false;
        this.addUserShow = true;
        this.ruleForm = JSON.parse(JSON.stringify(row))
      },
      async deleteUser(row){
        // 增加二次确认
        let rel = await this.answerFun('确定删除？')
        if(!rel){
          return
        }
        console.log('删除用户',row)
        this.$axios.post('/api/userRemove',{_id: row._id})
        .then(res=>{
          console.log('删除结果：',res)
          this.$message({
            message: '删除成功!',
            type: 'warning'
          })
          // 删除成功后，重新获取数据
          this.getData()
        })
        .catch(err=>{
          console.log('出错',err)
          this.$message({
            message: '服务器出错!',
            type: 'error'
          })
        })
      },
      getData(){
        this.$axios.get('/api/userList')
        .then(res=>{
          console.log('所有用户',res)
          // 将数据渲染到页面上
          this.tableData = res.data.data;
        })
        .catch(err=>{
          console.log('出错',err)
          this.$message({
            message: '服务器出错!',
            type: 'error'
          })
        })
      },
      submit(){
        console.log('user',this.ruleForm)
        // 将数据提交到后台
        if(this.isAdd){
          this.addOne()
        }else{
          this.updateOne()
        }
      },
      addOne(){
        this.$axios.post('/api/add',this.ruleForm)
        .then(res=>{
          console.log('成功',res)
          this.$message({
            message: '增加成功!',
            type: 'success'
          })
          this.addUserShow = false;
          // 增加成功后，重新查询最新的数据
          this.getData()
        })
        .catch(err=>{
          console.log('出错',err)
          this.$message({
            message: '服务器出错!',
            type: 'error'
          })
          this.addUserShow = false
        })
      },
      updateOne(){
        this.$axios.post('/api/updateUser',this.ruleForm)
        .then(res=>{
          console.log('成功',res)
          this.$message({
            message: '更新成功!',
            type: 'success'
          })
          this.addUserShow = false;
          // 增加成功后，重新查询最新的数据
          this.getData()
        })
        .catch(err=>{
          console.log('出错',err)
          this.$message({
            message: '服务器出错!',
            type: 'error'
          })
          this.addUserShow = false
        })
      }
    }
  }
</script>

<style>

</style>